<template>
<div class="security">
    <ul class="list-group">
        <li class="list-group-item">
          <div class="list-group-item-text">
            <h4> 安全等级:</h4>
          </div>
          <div class="progress progressbar-container">
            <progressbar :now="score" :type="scoreType" striped></progressbar>
          </div> 
          <div class="clearfix"></div>
        </li>
        <li class="list-group-item">
            <div class="list-group-item-icon">
                <span class="icon fa fa-key"></span>
            </div>
            <div class="list-group-item-text">
                <h4>帐号密码</h4>
                <span class="sub-title">用于保护帐号信息和登录安全</span>
            </div>
            <div class="list-group-item-btn">
              <button class="btn btn-default" v-on:click="state.modifyPwdShow=true"><span class="fa fa-pencil"></span>修改</button>
            </div>
            <div class="clearfix"></div>
        </li>
        <li class="list-group-item">
            <div class="list-group-item-icon">
                <span class="icon fa fa-envelope-o"></span>
            </div>
            <div class="list-group-item-text">
                <h4>安全邮箱<span v-if="security.email" class="title">{{security.email.substr(0,2)+'**@**'+security.email.substr(security.email.length-5)}}</span></h4>
                <span class="sub-title">安全邮箱可以用于登录中控帐号，重置密码或其他安全验证</span>
            </div>
            <div class="list-group-item-btn">
              <button class="btn btn-default" v-if="!security.email" v-on:click="state.modifyMailShow=true"><span class="fa fa-plus"></span>添加</button>
              <button class="btn btn-default" v-if="security.email" v-on:click="state.modifyMailShow=true"><span class="fa fa-pencil"></span>修改</button>
            </div>
            <div class="clearfix"></div>
        </li>
        <li class="list-group-item">
            <div class="list-group-item-icon">
                <span class="icon fa fa-mobile"></span>
            </div>
            <div class="list-group-item-text">
                <h4>安全手机 <span v-if="security.mobile" class="title">{{security.mobile.substr(0,3)+'***'+security.mobile.substr(security.mobile.length-3)}}</span></h4>
                <span class="sub-title">安全手机可以用于登录中控帐号，重置密码或其他安全验证</span>
            </div>
            <div class="list-group-item-btn">
              <button class="btn btn-default" v-if="security.mobile" v-on:click="state.modifyMobileShow=true"><span class="fa fa-pencil"></span>修改</button>
            </div>
            <div class="clearfix"></div>
        </li>
        <li class="list-group-item">
            <div class="list-group-item-icon">
                <span class="icon fa fa-comments-o"></span>
            </div>
            <div class="list-group-item-text">
                <h4>密保问题</h4>
                <span class="sub-title">密保问题可用于重置密码和其他安全验证</span>
            </div>
            <div class="list-group-item-btn">
              <button class="btn btn-default"  v-if="!security.question" v-on:click="state.modifyQuestionShow=true"><span class="fa fa-plus"></span>添加</button>
              <button class="btn btn-default"  v-if="security.question" v-on:click="state.modifyQuestionShow=true"><span class="fa fa-pencil"></span>修改</button>
            </div>
            <div class="clearfix"></div>
        </li>
    </ul>
    <modify-pwd :show.sync="state.modifyPwdShow"></modify-pwd>
    <modify-email :show.sync="state.modifyMailShow"></modify-email>
    <modify-mobile :show.sync="state.modifyMobileShow"></modify-mobile>
    <modify-question :show.sync="state.modifyQuestionShow"></modify-question>
</div>
</template>

<script>
/**
 * @author guocailee
 */
import modifyPwd from 'components/ModifyPwd'
import modifyEmail from 'components/modifyEmail'
import modifyMobile from 'components/modifyMobile'
import modifyQuestion from 'components/modifyQuestion'
export default {
  data: () => {
    const state = {
      modifyPwdShow: false,
      modifyMailShow: false,
      modifyMobileShow: false,
      modifyQuestionShow: false
    }
    return { state }
  },
  vuex: {
    getters: {
      security: ({ security }) => security
    }
  },
  computed: {
    score() {
      let score = 0
      for (let key in this.security) {
        if (this.security[key]) {
          if (Array.isArray(this.security[key])) {
            break
          }
          score += 30
        }
      }
      if (score === 90) {
        return 100
      } else {
        return score
      }
    },
    scoreType () {
      if (this.score < 30) {
        return 'danger'
      } else if (this.score < 60) {
        return 'warning'
      } else if (this.score < 80) {
        return 'info'
      } else {
        return 'success'
      }
    }
  },
  ready() {
  },
  components: {
    modifyPwd,
    modifyEmail,
    modifyMobile,
    modifyQuestion
  }
}
</script>

<style lang="scss">
@import '~styles/common';
.list-group-item {
  &-icon, &-text {
    float:left;
  }
  &-text {
    max-width: 60%;
    .title {
      margin-left:4px;
      color: $primary;
    }
  }
  .progressbar-container {
    margin: 18px 0 0 4px;
    float: left;
    width: 60%;
    height: 4px;
  }
  &-icon {
    width:32px;
    max-width: 15%;
    line-height: 58px;
    margin-right: 20px;
    text-align: center;
  }
  &-btn {
    margin-top: 10px;
    float:right;
    max-width:15%;
  }
  .btn {
    margin-top: 4px;
    .fa {
      margin-right: 6px;
    }
    &:hover {
      color: $primary;
    }
  }
  .icon {
    color: $primary;
    font-size: $font-size-h3;
  }
}

.sub-title {
  font-size: 13px;
  color: $gray;
}
</style>